<script setup lang="ts">
import { ElTree } from 'element-plus'
import { PAGING, TEMPORARY } from '@/constant'
// ------------------use------------------
// #region
const { $message } = useCurrentInstance()
const { vLoading, withLoading } = useDefineLoading()
const [tableData, setTableData] = useState<any[]>([])
// #endregion
// ------------------静态变量------------------
// #region
const treeData = TEMPORARY.productionProcesses
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const time = ref<string>('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const filterInputValue = ref<string>('')
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getTableData()
})
// #endregion
// ------------------内置方法---------------------
// #region
watch(
  () => filterInputValue.value,
  (value: string) => {
    treeRef.value!.filter(value)
  },
)
// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  await withLoading(sleep)(1000)
  setTableData(Array.from({ length: 20 }).fill(0))
}
function filterNode(value: string, data: any) {
  if (!value)
    return true
  return data.label.includes(value)
}
function save() {
  $message.success('数据保存成功！')
  getTableData()
}
// #endregion
</script>

<template>
  <div
    class="padding-sm align-center box-border flex gap-sm container"
  >
    <div
      class="container-left height-fill flex-incompressible padding-sm flex-direction box-border flex gap-xs"
    >
      <el-input
        v-model="filterInputValue"
        placeholder="全部"
        clearable
        class="flex-incompressible free"
      />
      <b-scrollbar class="flex-fillRemaining">
        <ElTree
          ref="treeRef"
          highlight-current
          default-expand-all
          :data="treeData"
          :filter-node-method="filterNode"
        />
      </b-scrollbar>
    </div>
    <div
      class="container-right height-fill flex-direction overflow flex-fillRemaining flex align-end"
    >
      <el-form
        inline
        label-width="40px"
        label-position="left"
        class="flex-incompressible width-fill"
      >
        <el-form-item>
          <el-date-picker
            v-model="time"
            type="date"
            placeholder="请选择填报日期"
            @change="getTableData"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">
            保存
          </el-button>
          <el-button @click="getTableData">
            参考上期
          </el-button>
          <el-button @click="getTableData">
            全部上报数据
          </el-button>
          <el-button @click="getTableData">
            计算上报数据
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading
        :data="tableData"
        class="width-fill flex-fillRemaining"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column label="工序及工序单元">
          00_00
        </el-table-column>
        <el-table-column label="名称" width="300">
          全厂-一次能源-其它原煤-购进已消费
        </el-table-column>
        <el-table-column label="计量单位">
          吨
        </el-table-column>
        <el-table-column label="填报" width="130">
          <el-input
            clearable
            size="small"
            style="width: 100px"
          />
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="260"
        >
          <el-tooltip content="计算当前" placement="top">
            <el-button
              type="primary"
              @click="getTableData"
            >
              计算当前
            </el-button>
          </el-tooltip>
          <el-tooltip content="计算后置" placement="top">
            <el-button
              type="primary"
              @click="getTableData"
            >
              计算后置
            </el-button>
          </el-tooltip>
          <el-tooltip content="上传" placement="top">
            <el-button
              type="primary"
              @click="getTableData"
            >
              上传
            </el-button>
          </el-tooltip>
        </el-table-column>
      </el-table>
      <el-pagination
        hide-on-single-page
        :page-sizes="PAGING.PAGE_SIZES"
        layout="total, sizes, prev, pager, next, jumper"
        :total="20"
        background
        class="flex-incompressible margin-top-sm"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  --container-left-w: 240px;
  &-left {
    width: var(--container-left-w);
    border: 1px solid var(--el-border-color-light);
    border-radius: 4px;
    transition: all var(--motion-bezier) 0.3s;
    &:hover {
      box-shadow: 0 8px 32px #0000000d;
    }
  }
}
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
